<template>
  <div class="MessageView" :id="clsid"   >
    <div class="view">
        <div class="messageDiv">
          <div class="btnDiv">
              <div style="position: relative;top:0.05rem;">
                <img src="../../assets/img/life/mebg0.png" style="width: 1.22rem;height: 0.3rem;">
                <img src="../../assets/img/life/mebg1.png" style="width:0.42rem;height: 0.3rem; ">
              </div>
              <div :class="['btn',(messType===Enum.mssage_t_0?'btn1':'btn0')]" @click="messTypeClick(Enum.mssage_t_0)">不太准</div>
              <div :class="['btn',(messType===Enum.mssage_t_1?'btn1':'btn0')]" @click="messTypeClick(Enum.mssage_t_1)">基本正确</div>
              <div :class="['btn',(messType===Enum.mssage_t_2?'btn1':'btn0')]" @click="messTypeClick(Enum.mssage_t_2)">非常准</div>
          </div>
          <div class="inputDiv">
            <textarea :value="refinputVa"  ref="refinput" placeholder='也可以反馈你的问题,例如:我的五行应该如何补呢?' @input="handlerchange"></textarea>
          </div>
          <div class="okBtn" @click="okBtnClick()"></div>
        </div>
    </div>
  </div>
</template>

<style scoped>
.MessageView{
  position: relative;
}
.view{

}

.messageDiv{
  position: relative;background-image: url("../../assets/img/life/messBg.png");width: 6.86rem;height: 3.8rem;left: 0.32rem;
}
.messageDiv .btnDiv{
  display:flex;display: -webkit-flex;flex-direction:row; justify-content:space-around;position:absolute;top:0.4rem;width: 100%;
}

.messageDiv .btnDiv .btn{
  position: relative;width: 1.4rem;height: 0.46rem;border-radius: 0.1rem;font-size: 0.26rem;line-height: 0.46rem;
}
.messageDiv .btnDiv .btn0{
  background-color: #281703;color: #8E5E25;
}
.messageDiv .btnDiv .btn1{
  background-color: #D98521;color: #FFFCE0;
}
.messageDiv .okBtn{
  position: absolute;background-image: url("../../assets/img/life/metjBtn.png");width: 1.7rem;height: 0.6rem;right: 0.32rem;top:3rem;
}
.messageDiv .inputDiv{
  position: absolute;width: 6.4rem;height: 1.5rem;border-radius: 0.1rem;background-color: #FFECE0;color: #C9AC99;left: 0.24rem;top: 1.25rem;
}
.messageDiv .inputDiv textarea{
  position:relative;width: 6rem;height: 1.3rem;left: 0rem;top:0.1rem;font-size: 0.22rem;color: #C9AC99;border: none;background: #FFECE0;outline:none;
  overflow: hidden;line-height: 0.3rem;
}
</style>
<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
let store = useStore();
let clsid=winApp.getClsId();
let router = useRouter();
let refinputVa=ref('');
let refinput=ref(null);
let messType=ref(Enum.mssage_t_1);
/*组件挂载完成后执行的函数；*/
onMounted(() => {

  console.log("MessageView onMounted 留言 ");

});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  // winApp.deleteNotification(clsid);
  console.log("MessageView onUnmounted  卸载组件实例后  ",clsid);
});
function messTypeClick(t){
  messType.value=t;
  console.log("MessageView messTypeClick   ");
}

function okBtnClick(){
  console.log("MessageView okBtnClick   ");
}
let handlerchange = (event) => {
  console.log("MessageView handlerchange ",refinput.value.value);
}
</script>
